<template>
  <div class="params-container">
    <!-- 面包屑组件 -->
    <my-bread :list="['商品管理', '参数列表']"></my-bread>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 警告 -->
      <el-alert title="注意：只有第三级分类才能设置参数" type="warning" show-icon></el-alert>
      <!-- form表单 / label / 级联 -->
      <el-form>
        <el-form-item label="选择商品分类：">
          <el-cascader
            v-model="selectedCateArr"
            clearable
            :options="cascaderOptions"
            :props="cascaderProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <!-- tabs标签页 标签页组件-->
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="many">
            <!-- 添加动态参数按钮 -->
            <el-button
              type="success"
              :disabled="disabled"
              size="small"
              @click="openAddDialog()"
            >添加动态参数</el-button>
            <el-table :data="manyAttrs" style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <!-- 渲染的位置 scope.row.attr_vals 变为数组-->
                  <el-tag
                    closable
                    :key="item.attr_id"
                    v-for="(item, i) in scope.row.attr_vals"
                    @close="delAttrVals(scope.row, i)"
                  >{{ item }}</el-tag>
                  <el-input
                    size="small"
                    class="add_input"
                    v-if="!scope.row.tagVisiable"
                    :ref="'add_input_' + scope.row.attr_id"
                    @blur="addAttrVals(scope.row)"
                    v-model="scope.row.inputVal"
                    @keyup.enter.native="KeyupEnter(scope.row)"
                  ></el-input>
                  <el-tag
                    class="add_btn"
                    @click="addTag(scope.row)"
                    v-if="scope.row.tagVisiable"
                    :disable-transitions="true"
                  >+New tag</el-tag>
                </template>
              </el-table-column>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="属性名称" prop="attr_name"></el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button icon="el-icon-edit" circle @click="openEditDialog(scope.row)"></el-button>
                  <el-button icon="el-icon-delete" circle @click="delParams(scope.row.attr_id)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="静态参数" name="only">
            <!-- 添加静态参数按钮 -->
            <el-button
              type="success"
              :disabled="disabled"
              size="small"
              @click="openAddDialog()"
            >添加静态参数</el-button>
            <el-table :data="onlyAttrs" style="width: 100%">
              <el-table-column type="index"></el-table-column>
              <el-table-column label="属性名称" prop="attr_name"></el-table-column>
              <el-table-column label="属性值">
                <template slot-scope="scope">
                  <el-tag style="width:200px">{{ scope.row.attr_vals }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button circle icon="el-icon-edit" @click="openEditDialog(scope.row)"></el-button>
                  <el-button circle icon="el-icon-delete" @click="delParams(scope.row.attr_id)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-card>
    <!-- 添加（动态/静态）参数 弹出框 -->
    <el-dialog
      :title="activeName === 'many' ? '添加动态参数' : '添加静态参数'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" :rules="rules" label-width="80px" autocomplete="off" ref="form">
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="form.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParams()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑（动态/静态）弹出框 -->
    <el-dialog
      :title="activeName ==='many' ? '修改动态参数' :'修改静态参数'"
      :visible.sync="editDialogFormVisible"
    >
      <el-form :model="editForm" :rules="rules" label-width="80px" ref="editForm">
        <el-form-item label="参数名称" prop="attr_name">
          <el-input v-model="editForm.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParams()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mixin from "./Params-Mixin.js";
export default {
  mixins: [mixin]
};
</script>

<style lang="less" scoped>
.el-form {
  margin-top: 20px;
}
.el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
.add_input {
  width: 80px;
}
.add_btn {
  width: 80px;
}
</style>
